<template>
	<s-layout title="积分记录" navbar="normal" :bgStyle="template.style?.background" color='#333333'>
		<view class="info ss-flex flex-column justify-center align-center ss-p-x-30">
			<view class="w-100 top ss-flex justify-between align-center">
				<view></view>
				<view class="num">{{userInfo.score||0}}</view>
				<view></view>
			</view>
			<view class="w-100 ss-flex justify-between align-center ss-m-t-20">
				<view></view>
				<view class="ss-flex justify-center align-center">
					<image class="point"
						src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/point-my.png"
						mode="aspectFit"></image>
					<view class="record ss-m-x-10">我的积分</view>
					<image class="query"
						src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/point-query.png"
						mode="aspectFit"></image>
				</view>
				<view></view>
			</view>
		</view>
		<view class="record-list w-100 ss-p-x-35">
			<view class="w-100 record-item ss-flex" v-for="(item,index) in state.list" :key="index">
				<view class="flex-sub">
					<view class="title">{{item.event_text}}</view>
					<view class="time ss-m-t-14">{{item.create_time}}</view>
				</view>
				<view class="num" v-if="item.amount > 0">+{{ parseInt(item.amount) }}</view>
				<view class="num" v-else>{{ parseInt(item.amount) }}</view>
			</view>
		</view>
		<uni-load-more v-if="state.total > 0" :status="state.loadStatus" :content-text="{
		    contentdown: '上拉加载更多',
		  }" @tap="loadmore" />
		<s-empty v-if="state.total <= 0 && state.loadStatus === 'noMore'"
			paddingTop="10"
			icon="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/vocal/data-empty.png" text="暂无记录"></s-empty>
	</s-layout>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	const template = computed(() => sheep.$store('app').template?.home);
	const userInfo = computed(() => sheep.$store('user').userInfo);
	const state = reactive({
		page:1,
		total:0,
		list:[],
		num:0,
		loadStatus:'noMore'
	})
	
	onLoad(()=>{
		getData()
	})
	
	onReachBottom(()=>{
		loadmore()
	})
	
	const loadmore = () => {
		if (state.loadStatus !== 'noMore') {
			state.page++
			getData()
		}
	}
	
	const getData = async () => {
		state.loadStatus = 'loading';
		const {error,data} = await sheep.$api.user.wallet.log({
		  type: 'score',
		  list_rows:10,
		  page:state.page,
		});
		
		if (error === 0) {
			state.num = data.income
			state.total = data.list.total
			state.list = state.list.concat(data.list.data)
			if (state.list.length === 0) {
				state.loadStatus = 'noMore';
			}
			if (data.list.current_page < data.list.last_page) {
			  state.loadStatus = 'more';
			} else {
			  state.loadStatus = 'noMore';
			}
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.info {
		width: 100%;
		height: 340rpx;
		background-image: url('https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/bg-orange.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.num {
			font-family: PingFang SC;
			font-size: 80rpx;
			font-weight: 600;
			color: #3D3D3D;
		}

		.query {
			width: 24rpx;
			height: 22rpx;
		}

		.point {
			width: 22rpx;
			height: 22rpx;
		}
	}
	
	.record-item {
		height: 136rpx;
		border-bottom: 2rpx solid #F0F0F0;
		
		.title {
			font-family: PingFang SC;
			font-size: 24rpx;
			font-weight: 600;
			color: #3D3D3D;
		}
		
		.time {
			font-family: PingFang SC;
			font-size: 20rpx;
			font-weight: normal;
			color: #767676;
		}
		
		.num {
			font-family: PingFang SC;
			font-size: 36rpx;
			font-weight: 600;
			color: #3D3D3D;
		}
	}
</style>